<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
      <!-- 首行 -->
      <tr class="title">
        <td width="50"><input type="checkbox" name="" class="choose_all" :checked="value" @change="input"></td>
        <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
        <td width="400">商品信息</td>
        <td width="150">单价（元）</td>
        <td width="150">数量</td>
        <td width="150">金额（元）</td>
        <td width="80">操作</td>
      </tr>

      <!-- 商品具体信息 -->
      <tr class="row" v-for="item in list" :key="item.id" >
        <td><input v-model="item.isSelected" type="checkbox" name="" class="choose"></td>
        <td class="tal"><a href="#" class="pic"><img :src="item.img" alt=""></a>
        </td>
        <td class="tal"><a href="#">{{ item.name }}</a></td>
        <td>
          <del class="tdl">{{ item.oldPrice }}</del>
          <br>
          <b class="unit">{{ item.price }}</b>
        </td>
        <td>
          <div class="amount">
            <a href="#" class="Increase" @click.prevent="item.count++">+</a>
            <input type="text" value="1" class="unum" v-model.number="item.count">
            <a href="#" class="Reduce" @click.prevent="item.count--">-</a>
          </div>
        </td>
        <td><b class="u-price">{{item.price * item.count}}</b></td>
        <td><a
          href="#" 
          class="btn-del"
          @click.prevent="deleTe(item.id)"
        >删除</a></td>
      </tr>
      <tr class="count">
        <td colspan="7">
          <div class="jiesuan clearfix">
            <div class="left fl">
              <p><input 
                    type="checkbox" 
                    name="" 
                    class="choose_all"
                    :checked="value"
                    @change="input"
                > 全选&nbsp;&nbsp;&nbsp;
                <a 
                  href="#" 
                  class="del_check"
                  @click.prevent="deleTeAll"
                >删除选中商品</a></p>
            </div>
            <div class="right fr clearfix">
              <p>商品总计：￥{{ totalProduct }}</p>
              <p>活动优惠：-￥{{ preFerential }}</p>
              <p>已选商品<span class="red t-number"> {{ seleCted }} </span>件 总价(不含运费、税费)：<span class="red t-price">￥{{ totalPrice}}</span></p>
              <!-- <div><a href="#" class="btn pay">结算</a></div> -->
              <a href="#" class="btn pay fr">结算</a>
            </div>
          </div>
        </td>
      </tr>
    </table>
</template>
<script>
export default {
  name: 'ShoppingCart',
  props: {
    list: Array,
    value: Boolean,
  },
  components: {},
  data() {
    return {
        asd: 0,
    };
  },
  // 计算属性
  computed: {
    // 商品总计
    totalProduct: {
        get() {
            return this.list
              .filter(item => item.isSelected === true)
              .reduce((prev, item) =>{ return prev + (item.oldPrice * item.count)},0)
        }
    },
    // 活动优惠
    totalPrice: {
        get() {
            return this.list
              .filter(item => item.isSelected === true)
              .reduce((prev, item) =>{ return prev + (item.price * item.count)},0)
        }
    },
    // 已选商品总价
    preFerential: {
        get() {
            return (this.totalProduct - this.totalPrice)
        }
        
    },
    // 已选商品
    seleCted: {
        get() {
            return this.list.filter(item => item.isSelected === true).length
        }
    }
  },
  watch: {},
  // 方法集合
  methods: {
    input() {
        this.$emit('input', !this.value)
    },
    deleTe(id) {
        this.$emit('deleTe', id)
    },
    deleTeAll() {
        this.$emit('deleTeAll')
    },
    
  },
  
};
</script>
<style scoped>
   .cartTable {
     border: 1px solid #ccc;
   
   }
   
   .cartTable tr.title {
     background-color: rgb(241, 243, 244);
     font-weight: bold;
   }
   
   .cartTable tbody tr td {
     /* border: 1px solid rgb(245, 245, 245); */
     padding: 10px;
   }
   
   /* 原价 */
   .cartTable tbody tr td .tdl {
     text-decoration: line-through;
     color: #999;
   }
   
   /* 商品数量 */
   .cartTable tr .amount .unum {
     width: 70px;
     height: 30px;
     box-sizing: border-box;
     text-align: center;
     font-size: 16px;
     float: left;
   }
   
   /* 数量加减按钮 */
   .cartTable tr .amount a {
     display: block;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     font-size: 18px;
     border: 1px solid #ccc;
     box-sizing: border-box;
   }
   
   .cartTable tr .amount a.Increase {
     border-right: none;
     float: left;
   }
   
   .cartTable tr .amount a.Reduce {
     border-left: none;
     float: left;
   }
   
   .cartTable tr.count .jiesuan .right {
     text-align: right;
   
   }
   
   .cartTable tr.count .jiesuan .right p {
     margin: 5px 0;
   }
   
   .cartTable tr.count .jiesuan .right .pay {
     display: block;
     width: 160px;
     height: 50px;
     line-height: 50px;
     background-color: #f30213;
     color: #fff;
     font-weight: bold;
     text-align: center;
     font-size: 20px;
   }
</style>